<template>
    <div class="assess-rules">
      <div class="header-rules">
        <i class="el-icon-arrow-left back-icon" @click="backFn" />
  
        <div class="right-wrap">
          <div class="rule-title">考评规则设置</div>
          <div class="rule-desc">综合考评 - 乡镇</div>
        </div>
      </div>
  
      <div class="body-rules">
        <el-form ref="form" :inline="true" :model="form" :rules="formRules">
          <div class="line-item">
            1、按照单体项目规模档次分为：
            <el-form-item prop="grade">
              <el-input
                class="custom-ipt"
                type="number"
                v-model.number="form.grade"
                max="8"
                oninput="value=value.replace(/^(0+)|[^\d]+/g,'') > 8 ? 8 : value.replace(/^(0+)|[^\d]+/g,'')"
              ></el-input> </el-form-item
            >档次，每增加<el-form-item prop="gradeMoney">
              <el-input
                class="custom-ipt"
                type="input"
                v-model="form.gradeMoney"
                oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
              ></el-input> </el-form-item
            >亿，多加<el-form-item prop="gradeFraction">
              <el-input
                class="custom-ipt"
                type="input"
                v-model="form.gradeFraction"
                oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
              ></el-input> </el-form-item
            >分
          </div>
          <div class="table-wrap">
            <div class="table-item table-head">
              <div class="area"></div>
              <div class="agency p-6">签约</div>
              <div class="not-landed p-6">签约未落地(1年)</div>
              <div class="be-done p-6">落地</div>
              <div class="product p-6">投产</div>
            </div>
            <div
              class="table-item area-list"
              v-for="(item, index) in form.areaList"
              :key="index"
            >
              <div class="area">
                <el-form-item
                  :prop="'areaList.' + index + '.intervalOne'"
                  :rules="{ required: true, message: ' ', trigger: 'blur' }"
                >
                  <el-input
                    class="custom-ipt"
                    type="input"
                    v-model="item.intervalOne"
                    oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
                  ></el-input> </el-form-item
                >-<el-form-item
                  :prop="'areaList.' + index + '.intervalTwo'"
                  :rules="{ required: true, message: ' ', trigger: 'blur' }"
                >
                  <el-input
                    class="custom-ipt"
                    type="input"
                    v-model="item.intervalTwo"
                    oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
                  ></el-input> </el-form-item
                >亿
              </div>
              <div class="agency">
                <el-form-item
                  :prop="'areaList.' + index + '.signing'"
                  :rules="{ required: true, message: ' ', trigger: 'blur' }"
                >
                  <el-input
                    class="custom-ipt"
                    type="input"
                    v-model="item.signing"
                    oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
                  ></el-input> </el-form-item
                >分
              </div>
              <div class="not-landed">
                <el-form-item
                  :prop="'areaList.' + index + '.signingOut'"
                  :rules="{ required: true, message: ' ', trigger: 'blur' }"
                >
                  <el-input
                    class="custom-ipt"
                    type="input"
                    v-model="item.signingOut"
                    oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
                  ></el-input> </el-form-item
                >分
              </div>
              <div class="be-done">
                <el-form-item
                  :prop="'areaList.' + index + '.signingIn'"
                  :rules="{ required: true, message: ' ', trigger: 'blur' }"
                >
                  <el-input
                    class="custom-ipt"
                    type="input"
                    v-model="item.signingIn"
                    oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
                  ></el-input> </el-form-item
                >分
              </div>
              <div class="product">
                <el-form-item
                  :prop="'areaList.' + index + '.produce'"
                  :rules="{ required: true, message: ' ', trigger: 'blur' }"
                >
                  <el-input
                    class="custom-ipt"
                    type="input"
                    v-model="item.produce"
                    oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
                  ></el-input> </el-form-item
                >分
              </div>
            </div>
          </div>
  
          <div class="line-item">
            2、引进央企情况（注册一年内）
          </div>
          <div class="table-login">
            <div class="company-item">
              <div class="info"></div>
              <div class="two">二级子公司</div>
              <div class="three">三级子公司</div>
            </div>
            <div class="company-item">
              <div class="info">疏解至属地</div>
              <div class="two"><el-form-item prop="gradeFraction">
                <el-input
                  class="custom-ipt"
                  type="input"
                  v-model="form.gradeFraction"
                  oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
                ></el-input></el-form-item>
              </div>
              <div class="three"><el-form-item prop="gradeFraction">
                <el-input
                  class="custom-ipt"
                  type="input"
                  v-model="form.gradeFraction"
                  oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
                ></el-input> </el-form-item>
              </div>
            </div>
            <div class="company-item">
              <div class="info">注册成立</div>
              <div class="two"><el-form-item prop="gradeFraction">
                <el-input
                  class="custom-ipt"
                  type="input"
                  v-model="form.gradeFraction"
                  oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
                ></el-input></el-form-item>
              </div>
              <div class="three"><el-form-item prop="gradeFraction">
                <el-input
                  class="custom-ipt"
                  type="input"
                  v-model="form.gradeFraction"
                  oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
                ></el-input> </el-form-item>
              </div>
            </div>
          </div>

          <div class="line-item">
            3、利用外资
          </div>
          <div class="line-item table-login">
            实际到位外资<el-form-item
              prop="investment"
            >
              <el-input
                class="custom-ipt"
                type="input"
                v-model="form.investment"
                oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
              ></el-input> </el-form-item
            >万美元以上（包含），加<el-form-item
              prop="investment"
            >
              <el-input
                class="custom-ipt"
                type="input"
                v-model="form.investment"
                oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
              ></el-input> </el-form-item>分，每增加到位<el-form-item
              prop="investment"
            >
              <el-input
                class="custom-ipt"
                type="input"
                v-model="form.investment"
                oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
              ></el-input> </el-form-item>万美元多加<el-form-item
              prop="investment"
            >
              <el-input
                class="custom-ipt"
                type="input"
                v-model="form.investment"
                oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
              ></el-input> </el-form-item>分
          </div>
          <div class="line-item">
            4、加减分项
          </div>
          <div class="line-item table-login">
            （1）满足指定条件落地<el-form-item
              prop="investment"
            >
              <el-input
                class="custom-ipt"
                type="input"
                v-model="form.investment"
                oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
              ></el-input></el-form-item
            >投产<el-form-item
              prop="investment"
            >
              <el-input
                class="custom-ipt"
                type="input"
                v-model="form.investment"
                oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
              ></el-input> </el-form-item>倍计分。 ① 10亿元（包含）以上项目 ② 重点发展产业 ③ 承接背景央企疏散产业项目
          </div>
          <div class="line-item table-login">
            （2）提请区委、区政府主要领导同志外出拜访企业、邀请区委、区政府主要领导同志出席签约活动及会见来邯重要商客，加<el-form-item
              prop="investment"
            >
              <el-input
                class="custom-ipt"
                type="input"
                v-model="form.investment"
                oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
              ></el-input> </el-form-item>分
          </div>
          <div class="line-item table-login">
            （3）连续2个月签约项目数量为0的，扣<el-form-item
              prop="investment"
            >
              <el-input
                class="custom-ipt"
                type="input"
                v-model="form.investment"
                oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
              ></el-input> </el-form-item>分
          </div>
          <div class="line-item table-login">
            （4）连续3个月落地项目入库为0的，扣<el-form-item
              prop="investment"
            >
              <el-input
                class="custom-ipt"
                type="input"
                v-model="form.investment"
                oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
              ></el-input> </el-form-item>分
          </div>
          <div class="line-item table-login">
            （5）纳入考核的央企子公司，每注销或迁出属地1家，按照相应得分标准加倍减分
          </div>
        </el-form>

        <div class="submit-box">
          <el-button type="primary" class="btn" @click="submitForm">保存</el-button>
        </div>
      </div>
  

    </div>
  </template>
  
  <script>
  import assessApi from '@/api/investment/assess'
  
  export default {
    name: "assessRule",
    data() {
      return {
        form: {
          grade: 1,
          gradeMoney: "",
          gradeFraction: "",
          quarter: "",
          foreign: "",
          investment: "",
          foreignInvestment: "",
          investigate: "",
          speak: "",
          major: "",
          squareOne: "",
          squareTwo: "",
          squareThree: "",
          squareFour: "",
          recommend: "",
          goOut: "",
          areaList: [
            {
              intervalOne: "",
              intervalTwo: "",
              signing: "",
              signingOut: "",
              signingIn: "",
              produce: "",
            },
          ],
        },
        formRules: {
          grade: [{ required: true, message: " ", trigger: "blur" }],
          gradeMoney: [{ required: true, message: " ", trigger: "blur" }],
          gradeFraction: [{ required: true, message: " ", trigger: "blur" }],
          quarter: [{ required: true, message: " ", trigger: "blur" }],
          foreign: [{ required: true, message: " ", trigger: "blur" }],
          investment: [{ required: true, message: " ", trigger: "blur" }],
          foreignInvestment: [{ required: true, message: " ", trigger: "blur" }],
          investigate: [{ required: true, message: " ", trigger: "blur" }],
          speak: [{ required: true, message: " ", trigger: "blur" }],
          major: [{ required: true, message: " ", trigger: "blur" }],
          squareOne: [{ required: true, message: " ", trigger: "blur" }],
          squareTwo: [{ required: true, message: " ", trigger: "blur" }],
          squareThree: [{ required: true, message: " ", trigger: "blur" }],
          squareFour: [{ required: true, message: " ", trigger: "blur" }],
          recommend: [{ required: true, message: " ", trigger: "blur" }],
          goOut: [{ required: true, message: " ", trigger: "blur" }],
        },
      };
    },
    computed: {
      gradeNumber() {
        return this.form.grade;
      },
    },
    watch: {
      gradeNumber: {
        handler(newVal) {
          if (newVal) {
            let oldLength = this.form.areaList.length;
            this.form.areaList.length = newVal;
  
            if (newVal > oldLength) {
              for (let i = oldLength; i < newVal; i++) {
                this.$set(this.form.areaList, i, {
                  intervalOne: "",
                  intervalTwo: "",
                  signing: "",
                  signingOut: "",
                  signingIn: "",
                  produce: "",
                });
              }
            }
          }
        },
        immediate: true,
      },
    },
    methods: {
      backFn() {
        this.$confirm("返回上一级，是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$emit("backFn");
          })
          .catch(() => {});
      },
      keyupFn(item) {
        console.log(item);
      },
      submitForm() {
        this.$refs.form.validate(async (valid) => {
          if (valid) {
            const {data} = await assessApi.saveGroupScoringRules({
              ...this.form,
              data: this.form.areaList
            })
  
            console.log(data)
          } else {
            this.$message({
              message: "请填写完整表单信息",
              type: "warning",
            })
  
            return false
          }
        })
      },
    },
  }
  </script>
  
  <style lang="scss">
  .assess-rules {
    .el-input--medium .el-input__inner {
      text-align: center;
    }
    .el-form--inline .el-form-item {
      margin-right: 0;
    }
    .el-form-item__error {
      padding-left: 6px;
    }
    .el-form-item {
      margin-bottom: 0;
    }
  }
  </style>
  
  <style lang="scss" scoped>
  .assess-rules {
    .custom-ipt {
      width: 60px;
      height: 32px;
      margin: 0 6px;
      text-align: center !important;
    }
    .transparent-txt {
      color: transparent;
      user-select: none;
    }
    .header-rules {
      display: flex;
      align-items: center;
      background-color: #fff;
      font-size: 14px;
      font-weight: 500;
      color: #333;
      padding: 6px 0;
      .back-icon {
        padding: 0 16px;
        cursor: pointer;
        color: #333;
      }
      .rule-desc {
        color: #999;
        font-weight: 400;
        font-size: 12px;
      }
    }
    .body-rules {
      margin: 16px;
      padding: 32px 16px 24px 182px;
      background-color: #fff;
      font-size: 14px;
      line-height: 21px;
      color: #333;
    }
    .table-head {
      margin-bottom: 14px;
    }
    .line-item {
      display: flex;
      align-items: center;
      margin: 16px 0;
    }
    .table-wrap {
      .p-6 {
        padding-left: 6px;
        font-weight: 600;
      }
      .table-item {
        display: flex;
        align-items: center;
        .area {
          width: 203px;
        }
        .agency {
          width: 110px;
        }
        .not-landed {
          width: 140px;
        }
        .be-done {
          width: 110px;
        }
        .product {
          width: 110px;
        }
      }
    }
    .area-list {
      margin-bottom: 16px;
      line-height: 36px;
      &:last-child {
        margin-bottom: 0;
      }
    }
    .submit-box {
      display: flex;
      justify-content: center;
      padding-bottom: 30px;
      .btn {
        margin-left: -182px;
      }
    }
    .table-login {
      padding-left: 30px;
      .company-item {
        display: flex;
        align-items: center;
        margin-bottom: 14px;
        .info {
          width: 100px;
        }
        .two,
        .three {
          width: 120px;
        }
      }
    }
  }
  </style>
  